<template>
  <vab-card>
    <template #header>
      <div class="flex_sb">
        <div class="flex">
          <span class="leve2_title" style="margin-right: 20px">快递运输</span>
        </div>
      </div>
    </template>
    <template #default>
      <el-table
        border
        max-height="220"
        style="width: 100%"
        :data="data.dataSource"
        v-loading="data.loading"
      >
        <el-table-column label="序号" align="center" width="60">
          <template #default="scope">
            <span class="ellipsis" v-text="scope.$index + 1"></span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, i) in data.cloums"
          :key="i"
          :width="item.width"
          :prop="item.prop"
          :label="item.label"
          :align="
            item.type == 'money' || item.type == 'number' ? 'right' : 'center'
          "
        >
          <template #header>
            <span class="text_center">{{ item.label }}</span>
          </template>
          <template #default="{ row }">
            <!-- 自定义 -->
            <div v-if="item.type == 'custom'">
              <span
                class="ellipsis link"
                v-if="item.prop == 'express_code'"
                @click="_getExpressList(row)"
              >
                {{ row[item.prop] || '' }}
              </span>
            </div>
            <!-- 正常 -->
            <div v-else class="ellipsis">
              {{ FieldFormat(row[item.prop], item.type) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </vab-card>
  <LogisticsInfo ref="logisticsInfoRef" />
</template>

<script setup lang="ts">
  /**
   *  快递运输
   */
  defineOptions({
    name: 'OrderTrackQuote',
  })
  import { fastMailCloums } from '../tools'
  import { FieldFormat } from '~/src/utils/utils'
  import LogisticsInfo from './LogisticsInfo.vue'
  import { getExpressList } from '~/src/api/dms/home/homeCustomer'
  const props = defineProps({
    orderStatus: {
      type: Number,
      default: 4,
    },
  })

  const proxy: any = getCurrentInstance()?.proxy
  const router = useRouter()
  const loading = ref(false)

  const data: any = reactive({
    loading: false,
    page: {
      pageNum: 1,
      pageSize: 10,
      total: 0,
    },
    cloums: fastMailCloums,
    dataSource: [],
  })

  const logisticsInfoRef = ref()

  /**
   *
   * @method
   */

  const emit = defineEmits(['refresh'])

  const _getExpressList = async ({ express_code, logistics_com }: any) => {
    // logisticsInfoRef.value.openUp = [{ time: '2023-12-12', context: '111111' }]
    try {
      let res = await getExpressList({
        num: express_code,
        com: logistics_com,
        phone: '',
      })

      logisticsInfoRef.value.open(res.data)
    } catch (error) {}
  }

  // 获取更新数据
  const getUpdateData = ({ trans_info }: any) => {
    loading.value = true
    data.dataSource = trans_info?.list
    loading.value = false
  }

  /**
   * @实例
   */
  defineExpose({
    getUpdateData,
  })
</script>
